<template>
	<view class="">
		<!-- <uni-nav-bar background-color="rgba(68, 68, 68, 0.0)" :fixed="true" :statusBar="true">
		</uni-nav-bar> -->
		<scroll-view scroll-y="true" class="warp">
			<view class="widget-video" v-if="LinkType == true">
				<view class="scroll-video-box" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"
					:style="{'marginTop':marginTop+'px','transition':transition}">
					<view v-for="(item, index) in videoList" :key="index" style="width: 100vw;height: 100vh;">
						<i @click="dbClickAnimation" class="iconfont iconxihuan fabulous-item"
							:style="{'top':fabulous.top,'left':fabulous.left,'opacity':fabulous.opacity,'transform':fabulous.transform}"
							v-for="(fabulous, fabulousIndx) in fabulousArr" :key="fabulousIndx"></i>
						<i :class="['iconfont iconbofang btn-play',currentStatus == 'pause' && currentIndex == index ? 'show' : '']"
							@click="pauseVideo"></i>
						<video @click="pauseVideo" poster="item.cover" preload="auto" :controls="true"
							:custom-cache="false" @error="handleError" @waiting="handleWaiting"
							@loadedmetadata="loadedmetadata" :http-cache="true" :play-strategy="0" :id="item.id"
							class="fullscreen-video" :src="item.url" :show-progress="false" :show-fullscreen-btn="false"
							:show-play-btn="false" :loop="true" :autoplay="index == currentIndex"
							:show-center-play-btn="false" @ended="videoEnd" @timeupdate="timeupdate">
						</video>
						<view class="video-info">
							<!-- 视频主 -->
							<view class="atavar-box" @click.stop="clickImage(item)">
								<image class="atavar-img" :src="admin_Img" mode="widthFix">
								</image>
								<view class="add-follow-btn" v-if="!admin_chase">
									<i class="iconfont iconjia1 inline-block"></i>
								</view>
							</view>
							<!-- 喜欢 -->
							<view class="icon-box" @click.stop="toggleFabulous(item, index)">
								<i :class="['iconfont iconxihuan icon-btn', item.love ? 'color-red' : '']"></i>
								<view class="count-text">{{item.give_count}}</view>
							</view>
							<!-- 微信分享 -->
							<button open-type="share" class="icon-box">
								<!-- <image class="weixin-img" src="../../../static/weixin2.png" mode=""></image> -->
							</button>
						</view>
						<!-- 跳转选集 -->
						<view class="video-title">
							<view class="video-content">
								{{item.title}}
							</view>
							<!-- <van-notice-bar color="#ffffff" background="rgba(195, 195, 195, 0.3);" :scrollable="false"
								@click="showpopu(item,index)">
								『{{item.video_name}}』 更新至{{item.collect.length}}集丨选集 >
							</van-notice-bar> -->
						</view>
					</view>
				</view>
				<!-- 评论区 -->
				<!-- <view :class="['commont-box',commontShow ? 'active' : '']">
					<view class="commont-title">5578条评论</view>
					<view class="commont-list">
						<view v-for="(item, index) in 20" :key="index">
							<view class="comment-panel">
								<image class="first-user" src="" mode="widthFix"></image>
								<view class="first-comment">
									<view class="comment-name">Yjyyyyyy</view>
									<view class="comment-content">
										这是一条测试评论这是一条测试评论这是一条测试评论这是一条测试评论这是一条测试评论这是一条测试评论
									</view>
									<view class="time-box">
										<text class="inline-block">昨天22:00</text>
										<view class="inline-block reply-btn">回复</view>
									</view>
								</view>
								<view class="fabulous-box">
									<i class="iconfont iconxihuan fabulous-btn"></i>
									<view class="fabulous-text">3731</view>
								</view>

							</view>
							<view style="padding-left: 70rpx;">
								<view class="comment-panel">
									<image class="first-user" src="" mode="widthFix"></image>
									<view class="first-comment">
										<view class="comment-name">Yjyyyyyy</view>
										<view class="comment-content">
											这是一条测试评论这是一条测试评论这是一条测试评论这是
										</view>
										<view class="time-box">
											<text class="inline-block">昨天22:00</text>
											<view class="inline-block reply-btn">回复</view>
										</view>
									</view>
									<view class="fabulous-box">
										<i class="iconfont iconxihuan fabulous-btn"></i>
										<view class="fabulous-text">3731</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view> -->
			</view>
			<view v-if="LinkType == false" class="" class="scroll-video-box" @touchstart="touchStart"
				@touchmove="touchMove" @touchend="touchEnd">
				<view v-for="(item, index) in imgList" :key="index" style="width: 100vw;height: 100vh;">
					<image class="fullscreen-video" :src="item.url" mode=""></image>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getRecommendVideo,
		getaddPlay,
		getUserDetail,
		getMyLifeLike,
		getisOnline,
		getSmallTheaterDetails
	} from '@/module/index.js'
	const app = getApp()
	export default {
		data() {
			return {
				imgList: [{
						url: "http://videooss.dingding10.top/material/202107/18/ee5b7b6072036577817acb04c62f2b173f009fe1.jpg"
					},
					{
						url: "http://videooss.dingding10.top/material/202107/18/b3f22b23c5a2e6cb855ddf06229b202a0a057dee.jpg"
					}, {
						url: "http://videooss.dingding10.top/material/202107/15/3b07288db0aa2973264446467672e9353f198f40.jpg"
					},
					{
						url: "http://videooss.dingding10.top/material/202107/15/551a48598821783959338677b196f6968dd5386f.jpg"
					},
					{
						url: "http://videooss.dingding10.top/material/202107/15/c4ff678aee225587b5633eeb3d52651d9592400f.jpg"
					},
					{
						url: "http://videooss.dingding10.top/material/202107/18/03b1998557f55bf75bb0a084af721c6fd8d9c729.jpg"
					},
					{
						url: "http://videooss.dingding10.top/material/202107/18/1ef0ee004eaf100f5d92cb905cd4668b46903ce7.jpg"
					},
					{
						url: "http://videooss.dingding10.top/material/202107/15/5a99222352341acde8c424af3cf0a6e2bd0eadb7.jpg"
					},
					{
						url: "http://videooss.dingding10.top/material/202107/15/a3e9d265f20a3bb2158aeff5da1ed5620ff87e91.jpg"
					}
				],
				LinkType:  uni.getStorageSync('is_online'),
				isInProcessing: false,
				page: 1,
				page_count: 1,
				title: "",
				show: false,
				num: 3371,
				sharenum: 521,
				// 双击点赞记录
				fabulousArr: [],
				// 记录点击时间判断单击还是双击，单击暂停，双击点赞
				clickTimer: null,
				// 记录点击时间
				clickTime: 0,
				// 屏幕高度
				windowHeight: uni.getSystemInfoSync().windowHeight || window.innerHeight,
				// 动画效果
				transition: 'none',
				// 触摸开始值
				startY: 0,
				// 触摸移动值
				moveY: 0,
				// 滑动开始时间
				startTime: 0,
				// 向上滑动距离
				marginTop: 0,
				// 每次向上滑动的距离
				fixMarginTop: 0,
				// 滑动方向
				moveDirection: '',
				// 当前轮播的index
				currentIndex: 0,
				// 当前页的视频对象
				currentVideo: null,
				// 视频状态：播放/暂停
				currentStatus: 'play',
				videoList: [],
				// 是否显示评论
				commontShow: false,
				// 评论列表
				commentList: [],
				id: "",
				showBtn: false,
				admin_Img: "",
				admin_id: "",
				admin_chase: false
			};
		},
		onShow() {

		},
		onHide() {
			console.log(`退出了推荐`)
		},
		onLoad(option) {
			this.getVideoDetails(option.video_id)
			// this.getisOnline()
		},
		onReachBottom() {
			console.log(`触底`)
		},
		onTabItemTap(e) {
			console.log(e);
			// e的返回格式为json对象： {"index":0,"text":"首页","pagePath":"pages/index/index"}
		},
		onReady() {
			// 初始化拿到第一个视频对象
			if (this.videoList.length == 0) {
				return false
			} else {
				this.currentVideo = uni.createVideoContext(this.videoList[this.currentIndex].id.toString(), this);
			}
		},
		methods: {
			getisOnline() {
				getisOnline().then((res) => {
					if (res.code === 200) {
						console.log(res.data.type)
						this.LinkType = res.data.type
						// let stoTimer = setTimeout(() => {
						// 	clearTimeout(stoTimer)
						// 	stoTimer = null
						// }, 1000)
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 获取视频详情数据
			getVideoDetails(id) {
				let obj = {
					video_id: id,
					type: 2
				}
				getSmallTheaterDetails(obj).then((res) => {
					if (res.code === 200) {
						console.log(res)
						let stoTimer = setTimeout(() => {
							clearTimeout(stoTimer)
							stoTimer = null
							this.videoList = res.data.list.slice(0, 10)
							this.videoList.unshift(res.data.life)
							this.admin_Img = res.data.admin.profile_photo
							this.admin_id = res.data.admin.id
							this.admin_chase = res.data.concern
						}, 1000)
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 触摸开始
			touchStart(e) {
				this.transition = 'none';
				this.startY = e.touches[0].pageY;
				this.startTime = new Date().getTime();
			},
			// 触摸滑动
			touchMove(e) {
				// 如果评论面板打开，禁止滑动
				if (this.commontShow) {
					return;
				}
				this.moveY = e.touches[0].pageY;
				if (this.moveY > this.startY) {
					// 返回上一个视频
					let range = this.fixMarginTop + this.moveY - this.startY;
					if (this.currentIndex == 0) {
						this.marginTop = range > 10 ? 10 : range;
					} else {
						this.marginTop = range;
					}
					this.moveDirection = 'up';
				} else {
					// 查看下一个视频
					let range = this.fixMarginTop - this.startY + this.moveY;
					if (this.currentIndex == this.videoList.length - 1) {
						// 最后一个视频的位置
						let lastVideo = -this.currentIndex * this.windowHeight + -50;
						this.marginTop = range < lastVideo ? lastVideo : range;
					} else {
						this.marginTop = range;
					}
					this.moveDirection = 'down';
				}
			},
			// 触摸结束
			touchEnd(e) {
				this.transition = 'all .1s';
				let millisecond = new Date().getTime() - this.startTime;
				let condition1 = this.moveY > 0 && Math.abs(this.moveY - this.startY) > 50 && millisecond < 500;
				let condition2 = this.moveY > 0 && Math.abs(this.moveY - this.startY) > this.windowHeight;
				if (condition1 || condition2) {
					if (this.moveDirection == 'up') {
						// 返回上一个
						if (this.currentIndex == 0) {
							this.marginTop = 0;
						} else {
							this.marginTop = this.fixMarginTop + this.windowHeight;
							this.currentIndex = this.currentIndex - 1;
							this.videoPlayChange();
						}
					} else {
						// 查看下一个
						if (this.currentIndex == this.videoList.length - 1) {
							this.marginTop = this.fixMarginTop;
						} else {
							this.marginTop = this.fixMarginTop - this.windowHeight;
							this.currentIndex = this.currentIndex + 1;
							this.videoPlayChange();
						}

					}
				} else {
					this.marginTop = this.fixMarginTop;
				}
				this.fixMarginTop = this.marginTop;
				this.startY = 0;
				this.moveY = 0;
			},
			// 滑动切换
			videoPlayChange() {
				this.stopOtherVideo();
				let video = uni.createVideoContext(this.videoList[this.currentIndex].id.toString(), this);
				video.play();
				this.currentStatus = 'play';
				this.currentVideo = video;
			},
			// 暂停其他视频
			stopOtherVideo() {
				this.videoList.map(v => {
					let video = uni.createVideoContext(v.id.toString(), this);
					// video.stop();
					video.seek(1);
					video.pause();
				})
			},
			// 暂停/播放视频/双击点赞事件
			pauseVideo(e) {
				if (this.commontShow) {
					this.commontShow = false;
					return;
				}
				clearTimeout(this.clickTimer);
				let currentTime = new Date().getTime();
				let timeRange = currentTime - this.clickTime;
				if (timeRange < 300) {
					// 双击事件
					this.dbClickAnimation(e);

				} else {
					// 单击事件
					this.clickTimer = setTimeout(() => {
						e.preventDefault();
						e.stopPropagation();
						if (this.currentStatus == 'play') {
							this.currentVideo.pause();
							this.currentStatus = 'pause';
						} else {
							this.currentVideo.play();
							this.currentStatus = 'play';
						}
					}, 300);
				}
				this.clickTime = new Date().getTime();
			},
			// 视频主信息页面
			clickImage() {
				uni.navigateTo({
					url: `/wxcomponents/lifePage/index?id=` + this.admin_id
				});
			},
			// 喜欢请求
			getMyLifeLike(item, type) {
				// 发起请求
				let obj = {
					video_id: item.id,
					type: type
				}
				getMyLifeLike(obj).then((res) => {
					console.log(res)
					if (res.code === 200) {
						console.log(res)
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 更新提醒
			getguanzhu() {
				wx.requestSubscribeMessage({
					tmplIds: ['BXKBCd14XKdd_I5X70DcHqMeNgABetFxXA5_92OluCU'],
					success(res) {
						// console.log(res.BXKBCd14XKdd_I5X70DcHqMeNgABetFxXA5_92OluCU, `成功`)
						let status = res.BXKBCd14XKdd_I5X70DcHqMeNgABetFxXA5_92OluCU
						if (status == "accept") {
							uni.showToast({
								title: `订阅更新提醒成功`,
								icon: "none"
							})
						} else {
							uni.showToast({
								title: `小主求订阅`,
								icon: "none"
							})
						}
					},
					fail(res) {
						console.log(res, `失败`)
					},
					complete() {

					}
				})
			},
			// 追剧
			// addVideo(item) {
			// 	console.log(item)
			// 	// 发起请求
			// 	let obj = {
			// 		video_id: item.video_id,
			// 		video_detail_id: item.id,
			// 		sort: item.sort
			// 	}
			// 	getaddPlay(obj).then((res) => {
			// 		console.log(res)
			// 		if (res.code === 200) {
			// 			uni.showToast({
			// 				title: "追剧成功",
			// 				icon: "none"
			// 			})
			// 			// this.showBtn = true
			// 			this.getRecommendVideo()
			// 			this.currentVideo = uni.createVideoContext(this.videoList[0].id.toString(), this);
			// 		} else {
			// 			uni.showToast({
			// 				title: res.message,
			// 				icon: "none"
			// 			})
			// 		}
			// 	}).catch(err => {
			// 		console.log(err)
			// 	})
			// },
			// 双击点赞动画
			dbClickAnimation(e) {
				let deg = Math.round(Math.random() * 40 + 5);
				this.fabulousArr.push({
					left: e.detail.x - 25 + 'px',
					top: e.detail.y - 25 + 'px',
					transform: 'rotate(' + (deg % 2 == 0 ? deg : -deg) + 'deg)'
				})
				console.log(this.fabulousArr);
				let index = this.fabulousArr.length - 1;
				setTimeout(() => {
					this.$set(this.fabulousArr, index, Object.assign(this.fabulousArr[index], {
						opacity: 0,
						transform: 'scale(3) ' + this.fabulousArr[index].transform
					}))
				}, 500);
				setTimeout(() => {
					this.fabulousArr.shift();
				}, 1000);
				if (!this.videoList[this.currentIndex].love) {
					this.$set(this.videoList, this.currentIndex, Object.assign(this.videoList[this.currentIndex], {
						love: true
					}))
					console.log(`双击喜欢`)
					this.getMyLifeLike(this.videoList[this.currentIndex], 1)
				}
			},
			// 点赞切换
			toggleFabulous(item, index) {
				console.log(item)
				this.$set(this.videoList, index, Object.assign(item, {
					love: item.love ? false : true
				}));
				if (item.love == true) {
					console.log(`喜欢`)
					this.getMyLifeLike(item, 1)
					this.num += 1
				} else {
					console.log(`不喜欢`)
					this.getMyLifeLike(item, 2)
					if (this.num == 0) {
						uni.showToast({
							title: "求个赞",
							icon: "none"
						})
					} else {
						this.num -= 1
					}
				}
			},
			// 评论
			commontAdd() {
				this.commontShow = true;
			},
			// 自动播放
			videoEnd() {
				console.log("播完了")
			},
			handleWaiting() {

			},
			loadedmetadata(event) {
				if (!event.detail.duration) {
					uni.showToast({
						title: "加载中···",
						icon: "none"
					})
				}
			},
			handleError(event) {
				console.log(event)
				this.videoPlayChange()
			},
			// 当前播放时间
			timeupdate(event) {
				// console.log(event.detail)
			},
			// 选集播放
			goDetails(el, index) {
				console.log(el)
				this.currentIndex = index
			},
			// 选集弹窗
			showpopu(item, index) {
				console.log(item, this.LinkType)
				if (this.LinkType == false) {
					uni.navigateTo({
						url: "/wxcomponents/testPage/index?video_id=" + item.video_id +
							'&video_detail_id=' + item.id
					});
				} else {
					uni.navigateTo({
						url: "/wxcomponents/yjy-video-slide/yjy-video-slide?video_id=" + item.video_id +
							'&video_detail_id=' + item.id
					});
				}
			},
			// 选集弹窗按钮
			onClose() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './yjy-video-slide.css';

	page {
		position: relative;
	}

	.warp {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		height: 100%;
	}

	// 喜欢按钮动画
	.iconxihuan {
		transition: all .3s;
	}

	.iconxihuan:active {
		transform: scale(2);
	}

	// 双击点赞样式
	.fabulous-item {
		position: absolute;
		z-index: 99999;
		width: 100rpx;
		height: 100rpx;
		color: red;
		font-size: 100rpx;
		transition: opacity .5s, transform .5s;
		opacity: 1;
	}

	// 评论框
	.commont-box {
		position: absolute;
		z-index: 9;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 60%;
		overflow-y: auto;
		background-color: #222;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		transition: all .3s;
		transform: translateY(100%);
		display: flex;
		flex-direction: column;

		.commont-title {
			text-align: center;
			color: white;
			font-size: 24rpx;
			margin: 20rpx 0;
			font-weight: bold;
		}

		.commont-list {
			flex: 1;
			overflow-y: auto;

			.comment-panel {
				margin: 30rpx 40rpx;
				display: flex;

				.first-user {
					width: 50rpx;
					height: 50rpx;
					border-radius: 100%;
				}

				.first-comment {
					flex: 1;
					margin: 0rpx 20rpx;

					.comment-name {
						font-size: 24rpx;
						font-weight: bold;
						color: #999;
					}

					.comment-content {
						color: white;
						font-size: 26rpx;
						margin-top: 10rpx;
					}

					.time-box {
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #999;

						.reply-btn {
							margin-left: 20rpx;
						}
					}
				}

				.fabulous-box {
					text-align: center;

					.fabulous-btn {
						font-size: 36rpx;
						color: #666;
					}

					.fabulous-text {
						font-size: 24rpx;
						color: #999;
					}
				}
			}
		}
	}

	.commont-box.active {
		transform: translateY(0);
	}

	.widget-video {
		width: 100%;
		height: 100%;
		overflow: hidden;

		.btn-play {
			font-size: 80rpx;
			color: white;
			position: absolute;
			top: 50%;
			left: 50%;
			transition: all .3s;
			transform: translateX(-50%) translateY(-50%) scale(1.5);
			z-index: 8;
			opacity: 0;
		}

		.btn-play.show {
			opacity: 0.5;
			transform: translateX(-50%) translateY(-50%) scale(1);

		}
	}

	.fullscreen-video {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.video-info {
		width: 100rpx;
		position: absolute;
		right: 20rpx;
		bottom: 120rpx;

		.atavar-box {
			background-color: white;
			padding: 6rpx;
			border-radius: 100%;
			height: 100rpx;
			margin-bottom: 64rpx;

			.atavar-img {
				width: 100%;
				display: block;
				border-radius: 100%;
			}

			.add-follow-btn {
				width: 40rpx;
				height: 40rpx;
				padding: 4rpx;
				border-radius: 100%;
				color: white;
				background-color: red;
				position: absolute;
				bottom: -24rpx;
				left: 50%;
				transform: translateX(-50%);
				font-weight: bold;
				text-align: center;
				line-height: 32rpx;

				.iconjia1 {
					font-size: 24rpx;
				}
			}
		}

		.icon-box {
			width: 100rpx;
			height: 100rpx;
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			flex-direction: column;
			color: white;
			background: rgba(133, 133, 133, 0);

			.add-img {
				width: 60rpx;
				height: 60rpx;
			}

			.weixin-img {
				width: 70rpx;
				height: 70rpx;
			}

			.icon-btn {
				font-size: 60rpx;
				vertical-align: middle;
			}

			.count-text {
				font-size: 24rpx;
			}
		}
	}

	.video-title {
		position: absolute;
		left: 20rpx;
		bottom: 30rpx;
		width: calc(100% - 160rpx);
		color: white;

		.user-name {
			font-weight: bold;
		}

		.video-content {
			margin-top: 20rpx;
			margin-bottom: 24rpx;
			font-size: 30rpx;
		}
	}

	button {
		background-color: rgba(255, 255, 255, 0);
	}

	.popup {
		position: relative;
		width: 100%;
		padding-bottom: 80rpx;
		box-sizing: border-box;
	}

	.popup-bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0px 20rpx;
		box-sizing: border-box;
		z-index: 10000;
		height: 80rpx;
		background-color: #EAEAEA;
	}

	.popup-text {
		font-size: 24rpx;
	}

	.popup-btn {
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #DF851D;
		border-radius: 30rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: 400;
		text-align: center;
	}

	.selectBox {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}

	.selectItem {
		width: 28%;
		margin: 8rpx 12rpx;
	}

	.selectItem image {
		width: 100%;
		height: 200rpx;
	}

	.selectItem .active {
		border: 1px solid #F25011;
	}

	.selectText {
		font-weight: bold;
		font-size: 28rpx;
		text-indent: 6rpx;
		text-align: center;
	}
</style>
